<template>
  <jke-modal
    :visible.sync="jkeForm.visible"
    :width="1200"
    :title="jkeForm.title"
    :fullscreen.sync="jkeForm.fullscreen"
    :switchFullscreen="jkeForm.switchFullscreen"
  >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['库存管理', '库存调拨']" currentMenu="调拨单详情"> </crumbs>
    <div class="uni-card">
      <div class="bd-line"></div>
      <div class="item-wrap1">
        <div class="detail-item" style="width: 20%">
          <p class="subtitle">调拨单号</p>
          <p class="secondary-text">{{ detailInfo.allotOrder || '-' }}</p>
        </div>
        <div class="detail-item" style="width: 20%">
          <p class="subtitle">调拨人</p>
          <p class="secondary-text">{{ detailInfo.createBy || '-' }}</p>
        </div>
        <div class="detail-item" style="width: 20%">
          <p class="subtitle">提交时间</p>
          <p class="secondary-text">{{ detailInfo.createTime || '-' }}</p>
        </div>
        <!-- <div class="detail-item" style="width: auto">
          <p class="subtitle" style="text-align:right">状态</p>
          <p class="secondary-text" :style="{color: setColor(detailInfo.outStockStatus), fontSize: '16px'}">
            {{ detailInfo.outStockStatus == '1' ? '未开始' : detailInfo.outStockStatus == '2' ? '进行中' : '已完成' }}</p>
        </div> -->
        <div class="detail-item" style="width: auto">
          <flow-status
            ids="WMS_STOCK_ALLOT"
            style="text-align: right"
            :formStatusText="
              detailInfo.flowStatus == 'TERMINATED'
                ? '已终止'
                : detailInfo.flowStatus == 'RUNNING'
                ? '进行中'
                : '已通过'
            "
            :flowStatusText="detailInfo.flowStatusTxt"
            :flowStatus="detailInfo.flowStatus"
          ></flow-status>
        </div>
      </div>
    </div>
    <div class="cards-box">
      <a-card title="基本信息" :bordered="false" style="margin-top: 12px">
        <div class="item-wrap">
          <div class="detail-item">
            <p class="subtitle">调拨日期</p>
            <p class="secondary-text">{{ detailInfo.allotTime || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">调出仓库</p>
            <p class="secondary-text">{{ detailInfo.outWarehouseName || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">调入仓库</p>
            <p class="secondary-text">{{ detailInfo.inWarehouseName || '-' }}</p>
          </div>
        </div>
        <div class="item-wrap">
          <div class="detail-item">
            <p class="subtitle">调拨明细记录方</p>
            <p class="secondary-text">
              {{
                detailInfo.type == 'automatic_generation'
                  ? '调拨单生效后，自动生成出库记录、入库记录'
                  : '调拨后在出入库查询中手动新建出库单、入库单'
              }}
            </p>
          </div>
          <!-- <div class="detail-item">
            <p class="subtitle">基本单位</p>
            <p class="secondary-text">{{ detailInfo.basicUnitText || '-' }}</p>
          </div> -->
          <div class="detail-item" />
        </div>
        <div class="item-wrap">
          <div class="detail-item">
            <p class="subtitle">调拨事由</p>
            <p class="secondary-text">{{ detailInfo.reason || '-' }}</p>
          </div>
          <div class="detail-item" />
          <div class="detail-item" />
        </div>
        <div class="item-wrap" style="margin-top: 40px">
          <div style="width: 100%">
            <p class="subtitle">附件</p>
            <file-detail :ids="detailInfo.attachment"></file-detail>
          </div>
        </div>
      </a-card>

      <a-card :bordered="false" title="调拨详情" style="margin-top: 12px">
        <a-table
          size="middle"
          :scroll="{ x: 'calc(100vw - 304px)', y: 'calc(100vh - 520px)' }"
          :columns="tableColumns"
          :dataSource="detailInfo.stockAllotGoodDetailList"
          :pagination="false"
          class="j-table-force-nowrap"
        >
          <span slot="qualifiedNum" slot-scope="text, record" :title="`${text}${record.basicUnit}`">{{
            `${text}${record.basicUnit}`
          }}</span>
          <span slot="scrapNum" slot-scope="text, record" :title="`${text}${record.basicUnit}`">{{
            `${text}${record.basicUnit}`
          }}</span>
        </a-table>
        <!-- <div class="uni-card" style="padding: 20px 24px 0 24px">
          <div style="display: inline-block">共{{ reportPagination.total }}条</div>
          <div style="display: inline-block; float: right">
            <a-pagination
              :total="reportPagination.total"
              v-model="reportPagination.current"
              :page-size-options="pageSizeOptions"
              :page-size="reportPagination.pageSize"
              @change="onChangePage"
              @showSizeChange="onShowSizeChange"
              show-quick-jumper
              show-size-changer
            />
          </div>
        </div> -->
      </a-card>
      <div style="margin-top: 12px" v-if="detailInfo.flowInstId">
        <Examine  type="2" :id="detailInfo.flowInstId" ref="examine" />
        <div style="height: 50px"></div>
      </div>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import FileDetail from '@/components/fileActions/FileDetail'
import Examine from '@/components/examine'
import { API } from '@/api/requestFzs'
import FlowStatus from '@/pubComponent/FlowStatus'
import { allocationDetail } from '@/api/erpApi'
export default {
  data() {
    return {
      jkeForm: {
        title: '调拨单详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      detailInfo: {},
      flowStatus: {
        RUNNING: { text: '审批中', color: '#FF943E' },
        REFUSE: { text: '已拒绝', color: '#FF4D4F' },
        CANCELED: { text: '已撤回', color: '#888888' },
        AGREE: { text: '已通过', color: '#00B042' },
        TERMINATED: { text: '已终止', color: '#FF4D4F' },
      },
      goodsTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '物料',
            width: '10%',
            key: 'goodsName',
            dataIndex: 'goodsName',
          },
          {
            title: '规格',
            width: '10%',
            key: 'goodsSpec',
            dataIndex: 'goodsSpec',
          },
          {
            title: '物料类型',
            width: '10%',
            key: 'goodsTypeText',
            dataIndex: 'goodsTypeText',
          },
          {
            title: '基本单位',
            width: '10%',
            key: 'goodsBasicUnitText',
            dataIndex: 'goodsBasicUnitText',
          },
          {
            title: '计划投料总量',
            width: '15%',
            key: 'planTotalNum',
            dataIndex: 'planTotalNum',
          },
          {
            title: '本次领料量',
            width: '15%',
            key: 'num',
            dataIndex: 'num',
          },
          {
            title: '已出库量',
            width: '15%',
            key: 'inOutBoundNum',
            dataIndex: 'inOutBoundNum',
          },
        ],
      },
      reportPagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
      //出库列表
      tableColumns: [
        {
          title: '物品编号',
          dataIndex: 'goodsCode',
          align: 'left',
          width: '20%',
          ellipsis: true,
        },
        {
          title: '物品名称',
          dataIndex: 'goodsName',
          align: 'left',
          width: '20%',
          ellipsis: true,
        },
        {
          title: '规格',
          dataIndex: 'spec',
          align: 'left',
          width: '20%',
          ellipsis: true,
        },
        {
          title: '调拨合格品数',
          dataIndex: 'qualifiedNum',
          align: 'left',
          ellipsis: true,
          width: '20%',
          scopedSlots: {
            customRender: 'qualifiedNum',
          },
        },
        {
          title: '调拨报废品数',
          dataIndex: 'scrapNum',
          align: 'left',
          ellipsis: true,
          width: '20%',
          scopedSlots: {
            customRender: 'scrapNum',
          },
        },
        {
          title: '调拨合格品数(F)',
          dataIndex: 'qualifiedNumTextAssistUnit',
          align: 'left',
          ellipsis: true,
          width: '20%',
        },
        {
          title: '调拨报废品数(F)',
          dataIndex: 'scrapNumTextAssistUnit',
          align: 'left',
          ellipsis: true,
          width: '20%',
        },
      ],
    }
  },
  components: {
    crumbs,
    FileDetail,
    Examine,
    FlowStatus,
  },
  methods: {
    setColor(s) {
      let cor = {
        1: '#FF943E',
        2: '#1890FF',
        3: '#00B042',
      }
      return cor[s] || ''
    },
    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    initDetail(id) {
      this.jkeForm.visible = true
      allocationDetail({ id }).then((res) => {
        this.detailInfo = res.result
        console.log(this.detailInfo, '---res')
      })
    },
    // pageNo 改变
    onChangePage(current, pageSize) {
      this.reportPagination.current = current
      let reportObj = {
        id: this.parentId,
        pageNo: this.reportPagination.current,
        pageSize: this.reportPagination.pageSize,
      }
      this.getReportData(reportObj)
    },
    // pageSize 改变
    onShowSizeChange(current, pageSize) {
      this.reportPagination.current = 1
      this.reportPagination.pageSize = pageSize
      let reportObj = {
        id: this.parentId,
        pageNo: this.reportPagination.current,
        pageSize: this.reportPagination.pageSize,
      }
      this.getReportData(reportObj)
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.item-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item-wrap1 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item-wrap:nth-of-type(n + 2) {
  margin-top: 40px;
}
.detail-item {
  width: 30%;
}
.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px -40px 24px -40px;
}
.cards-box {
  height: calc(100vh - 205px);
  overflow-y: scroll;
}
</style>
